<!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mt-8 mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h4 class="text-[clamp(1.2rem,3vw,2rem)] font-bold text-gray-800">第<?= $location["location_order"]?>号 <?= $location["name"]?>研学基地介绍</h4>
                    <p class="text-gray-600 mt-1"><?= $location["description"]?></p>
                    <input type="hidden" id="page_id" value="<?= $location['id'] ?>">
                </div>
            </div>

            <!-- 基地特点图片展示 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/yuanlin_1.jpg") ?>" alt="智慧园林研学基地全景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/yuanlin_2.jpg") ?>" alt="研学活动场景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/yuanlin_3.jpg") ?>" alt="智慧园林基地特色环境" class="w-full h-48 object-cover">
                </div>
            </div>

            <!-- 简介和图表左右分列 -->
            <div class="flex flex-col md:flex-row mt-8 mb-6">
                <!-- 简介 -->
                <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl w-full md:w-4/5">
                <h3 class="text-xl font-bold text-gray-800 mb-2">简介</h3>
                <div class="text-gray-600 space-y-4">
                    <p class="text-indent-8">&emsp;&emsp;长沙园林生态园学程营地，是长沙市中小学生研学旅行营地，致力于做有温度的自然教育。营地拥有植物种类 300 余类 1000 余种，有完善的自然湿地生态系统，园内森林面积 2000 多亩，保持了江南地区原生的森林生态系统；拥有多种珍稀植物品种及丰富的野生动物资源，有着开展自然教育的良好基础。</p>
                    <p>&emsp;&emsp;最大推荐接待量：5000人</p>
                    <p>&emsp;&emsp;课程一览：动物园游玩、海洋馆、沙地乐园、马戏剧场、森林剧场、梦幻剧场、团队浮桥、定向越野、制作多肉礼物、植物香囊。</p>
                </div>
            </div>

                <!-- 图表 -->
                <div class="w-full md:w-1/3 p-6">
                    <canvas id="myChart"></canvas>
                </div>
            </div>

            <!-- 亮点内容 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">亮点内容</h3>
                <!-- 植物科普体验 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">1. 植物科普体验</h4>
                    <p class="text-gray-600">&emsp;&emsp;基地拥有丰富的植物科普展示和讲解项目，学生可以在这里了解植物的生长规律，学习植物分类知识。</p>
                </div>
                <!-- 园艺实践活动 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">2. 园艺实践活动</h4>
                    <p class="text-gray-600">&emsp;&emsp;通过参与园艺实践活动，学生能锻炼动手能力，培养耐心和责任心，体验种植的乐趣。</p>
                </div>
                <!-- 生态保护教育 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">3. 生态保护教育</h4>
                    <p class="text-gray-600">&emsp;&emsp;多种生态保护教育课程，让学生了解生态系统的重要性，增强对自然环境的保护意识。</p>
                </div>
            </div>

            <!-- 智慧园林研学基地一日研学课程安排 -->
            <!-- 智慧园林研学基地一日研学课程安排 -->
<div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">【园林探秘之旅行程安排】</h2>
    <div class="overflow-x-auto">
        <table class="w-full border-collapse">
            <colgroup>
                <col style="width: 15%;"> <!-- 时间列 -->
                <col style="width: 15%;"> <!-- 环节列 -->
                <col style="width: 70%;"> <!-- 环节介绍列 -->
            </colgroup>
            <thead>
                <tr class="bg-gray-50">
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">时间</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节介绍</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">09:00</td>
                    <td class="border border-gray-300 py-3 px-4">到达营地</td>
                    <td class="border border-gray-300 py-3 px-4">抵达长沙园林生态园学程研学营地</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">9:00 - 9:30</td>
                    <td class="border border-gray-300 py-3 px-4">春田花花会</td>
                    <td class="border border-gray-300 py-3 px-4">郁金香花海、樱花雨，开启春日的美好时光</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">09:30 - 10:00</td>
                    <td class="border border-gray-300 py-3 px-4">海洋馆探秘</td>
                    <td class="border border-gray-300 py-3 px-4">探秘“水中恐龙”巨骨舌鱼、探险海底一万米，血鹦鹉秘密、“气象小专家”赤月水母、美人鱼互动演出</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">10:00 - 10:20</td>
                    <td class="border border-gray-300 py-3 px-4">猛兽来撒野</td>
                    <td class="border border-gray-300 py-3 px-4">听狮子怒吼、跟黑熊躲猫猫</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">10:20 - 11:20</td>
                    <td class="border border-gray-300 py-3 px-4">奇妙动物城</td>
                    <td class="border border-gray-300 py-3 px-4">“语言小能手”土拨鼠、夜行侠长鼻浣熊、爱洗手的小浣熊、相亲相爱的细尾獴家族、“世界最大老鼠”水豚，带你解密动物趣味知识</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">11:20 - 11:50</td>
                    <td class="border border-gray-300 py-3 px-4">森林剧场</td>
                    <td class="border border-gray-300 py-3 px-4">动物大巡游、鸟类放飞表演</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">12:00 - 12:30</td>
                    <td class="border border-gray-300 py-3 px-4">午餐</td>
                    <td class="border border-gray-300 py-3 px-4">享用自备简餐</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">12:30 - 13:30</td>
                    <td class="border border-gray-300 py-3 px-4">动物园盛会</td>
                    <td class="border border-gray-300 py-3 px-4">欢乐滑滑梯、网红秋千、攀岩、网红滑索等30项无动力项目。高智商的黑帽悬猴、地球上最大的鸟鸵鸟、奔跑之王非洲大羚羊、世界上最小的袋鼠赤颈袋鼠、“安第斯黄金”驼羊、能用尾巴打伞的松鼠猴、两栖动物“登陆大作战”，等你来探索自然与生命的奥秘</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">13:30 - 14:00</td>
                    <td class="border border-gray-300 py-3 px-4">尖叫大马戏</td>
                    <td class="border border-gray-300 py-3 px-4">炫酷摩托、魔幻飞轮、高空绸吊、高空吊环、小丑欢乐互动等</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">14:00 - 15:00</td>
                    <td class="border border-gray-300 py-3 px-4">欢乐宾果</td>
                    <td class="border border-gray-300 py-3 px-4">喊泉大比拼、无动力乐园、霍比特小屋</td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">15:00</td>
                    <td class="border border-gray-300 py-3 px-4">欢乐返程</td>
                    <td class="border border-gray-300 py-3 px-4"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

            <!-- 结尾 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <p class="text-gray-600">同学们，智慧园林研学基地的奇妙之旅已经准备好啦！在这里，你们可以亲近自然、体验园艺乐趣、学习植物知识，收获满满的成长和快乐。快来一起开启这场精彩的研学冒险吧！</p>
            </div>
        </div>
    </div>

      <script>
        // 获取canvas元素
        const ctx = document.getElementById('myChart').getContext('2d');
        // 定义图表数据
        const data = {
          labels: ['教育性', '互动性', '实践性', '创新性', '安全性'],
          datasets: [{
            label: '基地能力',
            backgroundColor: 'rgba(51, 153, 102, 0.2)',
            borderColor: 'rgba(51, 153, 102, 1)',
            borderWidth: 2,
            data: [9, 8, 9, 7, 9] // 这里的数据可根据实际情况修改，代表各维度的评分
          }]
        };
        // 定义图表配置
        const options = {
          scale: {
            min: 1,             // 最小值设为1
            beginAtZero: true,
            steps: 10,
            stepValue: 1,
            max: 10
          },
          elements: {
            line: {
              // tension: 0.4
            }
          }
        };
        // 创建雷达图实例
        const myChart = new Chart(ctx, {
          type: 'radar',
          data: data,
          options: options
        });

        // 页面加载时记录开始时间
        let startTime = null;

        // 监听页面加载事件，记录开始时间
        window.addEventListener('load', function () {
            startTime = Date.now();
        });

        // 监听页面即将卸载事件，记录结束时间并发送停留时间到后端
        window.addEventListener('beforeunload', function () {
            recordPageStay();
        });

        function recordPageStay() {
            if (startTime === null) return; // 如果开始时间未记录，则不进行后续操作
            let endTime = Date.now();
            let duration = Math.floor((endTime - startTime) / 1000);

            fetch('/record-stay-activity/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ pageId: document.getElementById('page_id').value, duration: duration })
            })
           .then(response => response.json())
           .then(data => console.log(data));

            startTime = null; // 重置开始时间，避免重复计算
        }
      </script>